<template>
    <el-container>

        <el-header v-if="this.selectionAry.length>0">
            <el-button type="primary" @click="putPermissionDialog=true">发放<i class="el-icon-check el-icon--right"></i>
            </el-button>
            <!-- <el-button type="danger" @click="delPermission">删除<i class="el-icon-check el-icon--right"></i></el-button> -->
        </el-header>


        <el-main>
            <el-table v-loading="tableLoding" :data="tableData.data" style="width: 100%;padding-top:20px"
                @selection-change="handleSelectionChange" border>
                <el-table-column type="selection" width="100">
                </el-table-column>
                <el-table-column prop="permissionType" label="授权码类型" :formatter="permissionTypeChangeData" sortable>
                </el-table-column>
                <el-table-column prop="permissionCode" label="授权码">
                </el-table-column>
                <el-table-column prop="permissionEffective" label="授权有效期(天)/次数(次)">
                </el-table-column>
                <el-table-column prop="permissionCompany.applyTime" label="搜全码创建时间" sortable>
                </el-table-column>
            </el-table>
        </el-main>

        <el-footer>
            <div class="block">
                <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
                    @next-click="nextPage" :current-page="tableData.currentPage"
                    :page-sizes="[5, 10, 15, 20,25,30,35,40]" :page-size="tableData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
                </el-pagination>
            </div>
        </el-footer>

        <el-dialog :visible.sync="putPermissionDialog" width="30%">
            <el-form :model="putPermissionForm" ref="putPermissionForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="单位名称">
                    <el-input v-model="putPermissionForm.company">
                    </el-input>
                </el-form-item>
                <el-form-item v-if="selectionAry.length==1" label="电话号码">
                    <el-input v-model="putPermissionForm.phone">
                    </el-input>
                </el-form-item>

                <el-form-item label="下发用户">
                    <el-select v-model="putPermissionForm.sendUid" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.uid" :label="item.username" :value="item.uid">
                            <span style="float: left">{{ item.username }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.loginName }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="putPermission('putPermissionForm')">立即创建</el-button>
                    <el-button @click="resetForm('putPermissionForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </el-container>


</template>

<script>
    import {
        getPermissionData,
        editPermissionGrantState,
        delPermission
    } from "@/api/permissionApi";
    import {
        getUserOption
    } from "@/api/userApi"


    export default {
        data() {
            return {
                tableData: { //表格data
                    data: [],
                    currentPage: 1,
                    pageSize: 10,
                    total: 0,
                    grantState: 0
                },
                tableLoding: false, //表格加载
                selectionAry: [],
                putPermissionDialog: false,
                putPermissionForm: {
                    company: '',
                    phone: '',
                    sendUid: null
                },
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
            }
        },
        created: function () {
            this.getPermissionData()
            getUserOption().then(response => {
                this.options = response.data.data
            }).catch(error => {
                this.$message({
                    showClose: true,
                    message: error,
                    type: 'error'
                })
            })

        },
        methods: {
            //数据控制
            getPermissionData() {
                this.tableLoding = true
                const param = {
                    page: {
                        currentPage: this.tableData.currentPage,
                        pageSize: this.tableData.pageSize
                    },
                    permission: {
                        grantState: this.tableData.grantState,
                        applyState:0
                    }
                }
                getPermissionData(param).then(response => {
                    this.tableData.data = response.data.data.items
                    this.tableData.total = response.data.data.total
                }).catch(error => {
                    this.$message({
                        showClose: true,
                        message: error,
                        type: 'error'
                    })
                })
                this.tableLoding = false
            },
            changePageSize(val) {
                this.tableData.pageSize = val
                this.getPermissionData()
            },
            changeCurrentPage(val) {
                this.tableData.currentPage = val
                this.getPermissionData()
            },
            prevPage(val) {
                this.tableData.currentPage = val
                this.getPermissionData()
            },
            nextPage(val) {
                this.tableData.currentPage = val
                this.getPermissionData()
            },
            permissionTypeChangeData: function (row, column) {
                return row.permissionType == '1' ? "时间授权码" :
                    row.permissionType == '2' ? "次数授权码" :
                    row.permissionType == '3' ? "永久授权码" :
                    "未知"
            },
            ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            handleSelectionChange(val) {
                this.selectionAry = val
            },
            putPermission(name) {
                const param = {
                  permissionList : this.selectionAry,
                  permissionCompany : this.putPermissionForm 
                }
                editPermissionGrantState(param).then(response => {
                    this.$message({
                        showClose: true,
                        message: "发放成功",
                        type: 'success'
                    })
                    this.getPermissionData()
                    this.putPermissionDialog = false
                    this.resetForm(name)
                }).catch(error => {
                    this.$message({
                        showClose: true,
                        message: error,
                        type: 'error'
                    })
                })
            },
            delPermission() {
                delPermission(this.selectionAry).then(response => {
                    this.$message({
                        showClose: true,
                        message: "删除成功",
                        type: 'success'
                    })
                    this.getPermissionData()
                }).catch(error => {
                    this.$message({
                        showClose: true,
                        message: error,
                        type: 'error'
                    })
                })
            },
            resetForm(formName) {
                this.putPermissionForm.company = '',
                    this.putPermissionForm.phone = ''
            }
        }
    }
</script>

<style>
    .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #70b3ff87 !important;
    }
</style>